<template>
	<view class="update-info update-info-index">
		<!--信息列表 -->
		<view class="update-option" style="width: 750rpx;margin-top: 20px;">
			<view class="update-option-list" style="width: 750rpx;">
				<!-- 列表项 -->
				<view class="update-option-list-item flex-row">
					<view class="item-text">
						头像
					</view>
					<button class="item-icon btn_ads" style="width: 80px;height: 80px;" :plain="true" open-type="chooseAvatar" @chooseavatar='chooseavatar'>
						<image :src="userInfo.memberImg"></image>
					</button>
				</view>
				<!-- 列表项 -->
				<view class="update-option-list-item flex-row">
					<view class="item-text">
						昵称
					</view>
					<view class="item-value">
						<input class="item-value-input" v-model="userInfo.memberName" type="nickname" placeholder="请输入昵称" @change="getNickname"/>
					</view>
				</view>
				<!-- 列表项 -->
				<!-- <view class="update-option-list-item flex-row">
					<view class="item-text">
						账号
					</view>
					<view class="item-value">
						<input class="item-value-input" type="text" v-model="userInfo.memberAccount" />
					</view>
				</view> -->
				<!-- 列表项 -->
				<!-- <view class="update-option-list-item flex-row">
					<view class="item-text">
						密码
					</view>
					<view class="item-value">
						<input class="item-value-input" :type="showPassword?'text':'password'" v-model="userInfo.memberPwd" />
					</view>
				</view> -->
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit"
			  style="width: 750rpx;height: 120px;position: relative;">
			<view class="submit-button position-center" @click="submit">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, BASE_URL } from '../../../utils/CommonValues.js';
	import request from '../../../utils/request.js';
	export default {
		data() {
			return {
				showPassword: true, // 是否显示密码
				userInfo: {},
			}
		},
		onLoad(option) {
			console.log(option.userid);
			// 拿到用户id去后端查询用户信息 赋值给 userInfo
			const membersId = option.userid;
			request.GET(`/system/members/${membersId}`).then(response => {
				this.userInfo = response.data;
			})
		},
		methods: {
			getNickname(e){
				this.userInfo.memberName = e.detail.value;
			},
			// 获取头像
			chooseavatar(e) {
				console.log(e.detail.avatarUrl);
				this.userInfo.memberImg = e.detail.avatarUrl;
				console.log(this.userInfo);
				// let that = this
				// uni.uploadFile({
				//     url:`BASE_URL/common/upload"`, // 后台上传接口
				//     filePath: e.detail.avatarUrl, // 上传图片 url
				// 	name: 'file',
				// 	header: {
				// 		'Content-Type': 'multipart/form-data'
				// 	},
				// 	success(res) {
				// 		let img = JSON.parse(res.data).url
				// 		that.userInfo.headImg = img //赋值
				// 		console.log(img, "上传图片")
				// 	}
				// });
			},
			submit(){
				console.log(this.userInfo);
				// 提交修改
				request.PUT('/system/members', this.userInfo).then(response => {
					// 修改完成之后把当前用户信息存入本地内存
					uni.setStorage({
						key: 'app_user_info',
						data: JSON.stringify(this.userInfo)
					}).then(response => {
						uni.navigateBack();
					})
				})
			},
			// 选择头像
			choseImage() {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'], // album[相册] camera[拍照]
					camera: "back",
					success: (result) => {
						console.log(result)
						this.userInfo.iconUrl = result.tempFiles[0].tempFilePath
					},
					fail: (error) => {
						if(error.errMsg === 'chooseMedia:fail cancel') {
							uni.showToast({
								title: '选择头像取消',
								icon: 'none'
							})
						}
						console.log("文件选择错误", error)
					}
				})
			}
		}
	}
</script>

<style>
.update-option-list-item {
	width: 650rpx;
	margin: 0 auto;
	min-height: 50px;
	border-bottom: 2px solid #eee;
	transition: all .3s;
}
.item-text {
	font-weight: bold;
}
.item-value {
	font-weight: bold;
	color: #aaa;
}
.item-value-input {
	text-align: right;
}
.submit-button {
	width: 500rpx;
	height: 50px;
	background-color: royalblue;
	border-radius: 25px;
	box-shadow: 0 0 15px 0 #bbb;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 10px;
	color: white;
	transition: all .1s;
}
.submit-button:active{
	box-shadow: none;
}
</style>
